<template>
    <div class="container withdrawal-box">
        <nav-bar :title="$route.query.type==1?'收款方式管理':'选择收款方式'" fixed="fixed" />
        <div class="tab_fx">
            <span :class="{active:active==1}" @click="onActive(1)">微信收款</span>
            <span :class="{active:active==2}" @click="onActive(2)">支付宝收款</span>
            <!-- <span :class="{active:active==3}" @click="onActive(3)">银行卡收款</span> -->
        </div>
        <h2>{{active==1?'微信收款':'支付宝收款'}}</h2>
        <!-- <h2>{{active==1?'微信收款':active==2?'支付宝收款':'银行卡收款'}}</h2> -->

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- <van-list v-model="loading" :finished="finished" :offset="50" :immediate-check="false" finished-text="暂无数据"
        @load="onLoad"> -->
            <div class="box">
                <div class="list" v-if="financeWaterList.length>0">
                    <div class="item" v-for="(item,index) in financeWaterList" :key="item.id">
                        <div class="m_bx" @click="onSelect(item)">
                            <div class="top">
                                <h3>收款账户</h3>
                                <van-icon v-if="$route.query.id" :name="item.is_default==1?'checked':'circle'" />
                                <div class="edit"
                                    @click="goRoter('withdrawal/user/add?type='+active + '&inf=' + JSON.stringify(item))">
                                    编辑</div>
                            </div>
                            <div class="bom">
                                <div class="left">
                                    <div class="nick">{{item.account_name}}</div>
                                    <div class="account">{{item.account_no}} </div>
                                </div>
                                <div class="right" @click.stop="bindShow(item.account_img)" v-if="active!=3"><img
                                        src="./images/icon.png" alt=""></div>
                                <!-- <div class="right" @click.stop="goRoter('payTypeImg?img='+item.account_img+'&type='+active)"
                    v-if="active!=3"><img src="./images/icon.png" alt=""></div> -->
                            </div>
                        </div>
                        <div class="obm_bx" v-if="$route.query.type==1">
                            <div class="right" @click="setDefaultPay(item,index)">
                                <p>设为默认支付方式</p>
                                <span :class="{active:item.is_default==1}"></span>

                                <!-- <van-icon :name="item.is_default==1?'checked':'circle'" /> -->
                            </div>
                            <div class="delete">
                                <van-icon @click="onDelete(item,index)" name="delete" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- </van-list> -->
            <div class="empty" v-if="!financeWaterList.length">您尚未添加 {{active==1?'微信收款':'支付宝收款'}} 方式！
            </div>
        </van-pull-refresh>
        <div class="submit" v-if="$route.query.type==1">
            <div class="btn" @click="goRoter('withdrawal/user/add?type='+active)">添加</div>
        </div>
        <div class="submit" v-if="$route.query.id && financeWaterList.length > 0">
            <div class="btn" @click="onSubmit">立即抢单</div>
        </div>
        <!-- <div class="submit" v-else>
            <div class="btn" @click="onSubmit">立即抢单</div>
        </div> -->

        <van-popup v-model="showPayPassword" position="bottom" closeable :style="{ height: '10.4rem' }">
            <j-password-input @change="withdrawSecond">
                <div class="password-title bd-b">请输入支付密码</div>
                <div style="margin-bottom:20px;"></div>
                <!-- <div class="password-deposit">
        <span class="password-deposit__text">提现金额</span>
        <div class="password-deposit__amount">￥{{ withdrawalAmount * 0.95 }}</div>
      </div> -->
            </j-password-input>
        </van-popup>
        <div class="window" v-show="imgShow" @click="bindHide">
            <div class="img"><img :src="imgUrl" alt=""></div>
        </div>
    </div>
</template>
<script>
import md5 from 'md5';
export default {
  data() {
    return {
      active: 1,
      isLoading: false,
      loading: false,
      finished: false,
      imgShow: false,
      imgUrl: 'http://file.zovikj.cn/2019/12/20191215161435655.png',
      pages: {
        page: 1,
        limit: 10
      },
      financeWaterList: [],
      showPayPassword: false,
      orderId: '',
      payId: ''
    };
  },
  methods: {
    onSubmit() {
      this.showPayPassword = true;
      this.orderId = this.$route.query.id;
    },
    withdrawSecond(val) {
      let that = this;
      for (let i = 0; i < this.financeWaterList.length; i++) {
        if (this.financeWaterList[i].is_default === 1) {
          this.payId = this.financeWaterList[i].id;
          break;
        }
      }
      const options = {
        id: this.orderId,
        payPass: md5(md5(val)),
        csId: this.payId
      };
      this.$API.user.orderGrab(options).then(res => {
        if (!res.code) {
          this.$toast('抢单成功');
          // this.onRefresh();
          setTimeout(() => {
            that.$router.replace({
              path: '/grabsheet',
              query: {
                type: '2'
              }
            });
          }, 1000);
        }
        this.showPayPassword = false;
      });
    },
    onSelect(item) {
      return false;
      if (this.$route.query.type === 1) return;
      for (let i = 0; i < this.financeWaterList.length; i++) {
        this.financeWaterList[i].is_default = 0;
      }
      item.is_default = 1;
    },
    onDelete(item, index) {
      if (item.is_default === 1) {
        this.$toast('不能删除默认收款账户');
        return;
      }
      this.$dialog
        .confirm({
          title: '确认删除',
          message: '是否删除该收款方式'
        })
        .then(() => {
          // on confirm
          this.$API.user.deletePayType({
            id: item.id
          }).then(res => {
            if (res.code === 0) {
              this.financeWaterList.splice(index, 1);
              this.$toast('删除成功');
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    goRoter(path) {
      this.$router.push({
        path: '/' + path
      });
    },
    // 查看二维码
    bindShow(path) {
      this.imgShow = true;
      this.imgUrl = path;
    },
    bindHide() {
      this.imgShow = false;
      this.imgUrl = '';
    },
    //   设置默认收款账户
    setDefaultPay(item, index) {
      if (item.is_default === 1) {
        this.$toast('已经是默认收款账户');
        return;
      }
      var d = Object.assign({}, item);
      d.is_default = d.is_default === 1 ? 0 : 1;
      this.$API.user.setDefaultPayType({
        id: item.id
      }).then(res => {
        if (res.code === 0) {
          this.$toast('设置成功');
          for (let i = 0; i < this.financeWaterList.length; i++) {
            this.financeWaterList[i].is_default = 0;
          }
          item.is_default = d.is_default;
          this.$store.dispatch('setSettingInfo');
        }
      });
    },
    onActive(val) {
      this.active = val;
      this.onRefresh();
    },
    onRefresh() {
      this.$set(this.pages, 'page', 1);
      this.getList();
    },
    onLoad() {
      this.pages.page++;
      this.getList();
    },
    getList() {
      this.pages.type = this.active;
      this.$API.user
        .getPayTypeList(this.pages)
        .then(res => {
          if (!res.code) {
            if (this.pages.page === 1) {
              this.$set(this, 'financeWaterList', res.data);
            } else {
              this.$set(this, 'financeWaterList', [...this.financeWaterList, ...res.data]);
            }
            if (this.financeWaterList.length === res.count) {
              this.$set(this, 'finished', true);
            }
          }
        })
        .finally(() => {
          if (this.pages.page === 1) {
            setTimeout(() => {
              this.$set(this, 'isLoading', false);
            }, 500);
          }
          this.$set(this, 'loading', false);
        });
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style lang="less" scoped>
    .empty {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #888888;
        height: 200px;
    }

    .window {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
            width: auto;
            height: auto;
            max-width: 80%;

            img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }

    .submit {
        padding: 0 30px;

        .btn {
            height: 86px;
            background-color: #e31d1a;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #fff;
        }
    }

    .tab_fx {
        display: flex;
        border-top: 1px solid #f4f4f4;
        background: #fff;

        span {
            height: 86px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #333;
            flex: 1;

            &.active {
                color: #e31d1a;
            }
        }
    }

    h2 {
        font-size: 22px;
        height: 78px;
        display: flex;
        align-items: center;
        color: #333;
        padding: 0 30px;
    }

    .box {
        padding: 0 30px;

        .list {
            background: #fff;
            padding: 15px 34px;
            border-radius: 10px;
        }

        .top {
            display: flex;
            margin-bottom: 30px;
            justify-content: space-between;
            align-items: center;

            .edit {
                padding: 10px 0 10px 30px;
                color: #0c82f4;
                font-size: 26px;
            }
        }

        .bom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .item {
            background: #f4f4f4;
            margin: 30px 0;
            position: relative;
        }

        h3 {
            font-size: 22px;
            font-weight: normal;
            color: #e52d2a;
        }

        .right {
            display: flex;
            align-items: center;

            p {
                font-size: 22px;
                color: #333;
                padding-right: 5px;
            }

            span {
                position: relative;
                width: 68px;
                height: 20px;
                background-color: #bad5ef;
                border-radius: 10px;
                margin-left: 10px;

                &:after {
                    content: "";
                    display: block;
                    width: 34px;
                    height: 34px;
                    background-color: #bec7d0;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    margin-top: -17px;
                    right: auto;
                    left: 0;
                }

                &.active:after {
                    right: 0;
                    left: auto;
                    background-color: #0c82f4;
                }
            }

            i {
                color: #0c82f4;
                font-size: 34px;
            }

        }

        img {
            width: 50px;
        }

        .nick {
            font-size: 22px;
            color: #999;
        }

        .account {
            font-size: 32px;
            color: #212121;
            font-weight: bold;

            display: flex;
            justify-content: space-between;

            span {

                font-size: 22px;
                font-weight: normal;
                color: #666;
            }
        }

        i.van-icon-delete {
            margin-left: 20px;
            color: #999;
            font-size: 40px;
        }

        .delete {
            position: absolute;
            color: #999;
            bottom: 10px;
            right: 30px;
            display: flex;
            align-items: center;
            font-size: 24px;
        }

        .m_bx {
            padding: 30px 30px 40px 40px;
        }

        .obm_bx {
            border-top: 6px solid #fff;
            padding: 0 30px 0 40px;
            background: #f4f4f4;
            height: 60px;
            align-items: center;
            display: flex;
            justify-content: space-between;
        }

        .van-icon-circle {
            color: #999;
            font-size: 45px;
        }

        .van-icon-checked {
            font-size: 45px;
            color: #0c82f4;
        }
    }
</style>
